
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="./1.jpg" /></div>
        <div class="right">
            <img src="./1.jpg" />
            <img src="./2.jpg" />
            <img src="./3.jpg" />
            <img src="./4.jpg" />
        </div>
    </div>
</body>

<script>
    // 1、自动切换 图片
        let timer = null;
        let imgs = document.querySelectorAll(".right>img");
        let targetImg = document.querySelector(".left>img");
        
        let imgIndex  = 1;
        // 默认设置  第一张图片   opacity=1
        imgs.forEach(img => img.style.opacity = ".5");
        document.querySelector(".right>img:first-of-type").style.opacity = 1;
        timer = setInterval(loopImg, 2000);
        function loopImg(){
            imgIndex++;
            if(imgIndex == 5)
            {
                imgIndex = 1;
            }
            targetImg.src =`./${imgIndex}.jpg`;
//          设置 右侧图片 透明度
            imgs.forEach((img,index) => {
                if( imgIndex == (index+1) )
                {
                    img.style.opacity = '1';
                }
                else
                    img.style.opacity = '0.5';
            });

        }
//      2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片 自动继续切换图片 
        imgs.forEach( (img,index) => {
            img.style.cursor = "pointer";
            img.addEventListener("mouseover",function(){
                // console.log(this);  //指向img
                clearInterval(timer);
                targetImg.src = this.src;
                // 把图片索引 改成当前索引
                if(index==3)
                    imgIndex = 0;
                else
                    imgIndex = index+1;
            // 设置图片透明度
                imgs.forEach(img => img.style.opacity = ".5");
                this.style.opacity = '1';
            });
            img.addEventListener("mouseout",function(){
                // console.log(this);  //指向img
                timer = setInterval(loopImg, 2000);
                targetImg.src = this.src;
            });
            // 3、当前显示的小图片 透明度为1  其他没有显示的保证透明度为0.5
        });
</script>